<template>
  <div class="Zlgl_detail">
    <!-- 第一行 -->
    <el-row>
      <el-col>
        <div class="header_title">资料详情</div>
        <div class="header_btn">
          <el-button class="edit_btn" @click="editInfo">
            <i class="el-icon-edit-outline"></i>
            编辑
          </el-button>
          <el-button
            class="download_btn"
            type="primary"
            icon="el-icon-download"
            @click="downloadInfo"
          >
            下载
          </el-button>
<!--           <el-button class="download_btn" type="primary" @click="downloadInfo">
            
          </el-button> -->
        </div>
      </el-col>
    </el-row>
    <!-- 第二行 -->
    <el-col :span="24">
      <div class="content_top_title">{{ zlglData.dataName }}</div>
    </el-col>
    <el-col :span="24">
      <div class="content_title">
        {{ zlglData.equipmentModel }} &nbsp;&nbsp;&nbsp;&nbsp;
        {{ zlglData.fileUploadTime | formatTimer }}
      </div>
    </el-col>
    <el-col :span="24">
      <div class="content_box">
        <p>
          {{zlglData.dataDesc}}
        </p>
      </div>
    </el-col>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      zlglData: [],
    };
  },
  methods: {
    // 获取资料管理的数据
    getZlglData: function () {
      let ZlglData = sessionStorage.getItem("zlglInfo");
      this.zlglData = JSON.parse(ZlglData);
    },

     // 下载
    downloadInfo: function () {
      this.$axios({
        url: "/download",
        responseType: "blob", //设置返回类型
        params: {
          fileName:this.zlglData.fileAddress,
        }
      }).then((res) => {
        const link = document.createElement("a");
        try {
          let blob = new Blob([res.data], {
            type: "application/vnd.ms-excel",
          });
          let _fileName = res.headers["content-disposition"]
            .split(";")[1]
            .split("=")[1]; //文件名，中文无法解析的时候会显示 _(下划线),生产环境获取不到
          link.style.display = "none";
          // 兼容不同浏览器的URL对象
          const url = window.URL || window.webkitURL || window.moxURL;

          link.href = url.createObjectURL(blob);

          link.setAttribute(
            "download",
            _fileName.substring(_fileName.lastIndexOf("_") + 1)
          );
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          url.revokeObjectURL(link.href); //销毁url对象
        } catch (e) {
          console.log("下载的文件出错", e);
        }
      });
    },
    editInfo: function () {
      this.$router.push('/home/Zlgl_edit')
    },
  },
    
  // 日期时间格式化过滤器
  filters: {
    formatTimer: function (time) {
      let date = new Date(time);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      // return y + "-" + MM + "-" + d + " " + h + ":" + m;
      return y + "-" + MM + "-" + d + " " + h + ":" + m;
    },
  },
  mounted: function () {
    this.getZlglData();
  },
};
</script>
<style lang="less" scoped>
.Zlgl_detail {
  width: 100%;
  height: 100%;
  //   background: yellowgreen;

  .el-col {
    margin-top: 20px;
    padding-left: 30px;
    min-width: 1440px;
    display: flex;
  }
  .header_title {
    height: 40px;
    width: 90%;
    font-size: 24px;
    line-height: 40px;
    color: #344563;
    font-weight: bolder;
  }
  .header_btn {
    height: 40px;
    width: 30%;
    font-size: 24px;
    line-height: 40px;
    color: #344563;
    font-weight: bolder;
    // background: yellow;
    .edit_btn {
      width: 100px;
      height: 40px;
      color: #fff;
      border-color: #61a4e4;
      background: #61a4e4;
      margin-right: 50px;
    }
    .download_btn {
      width: 100px;
      height: 40px;
      border-color: #64c8bc;
      background: #64c8bc;
      color: #fff;
    }
  }
  //   标题
  .content_top_title {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    padding-right: 50px;
    // background: yellowgreen;
  }
  //   副标题
  .content_title {
    width: 100%;
    height: 40px;
    color: #6554c0;
    line-height: 40px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    padding-right: 50px;
    // background: yellowgreen;
  }
  //   内容
  .content_box {
    width: calc(100% - 120px);
    height: auto;
    text-align: left;
    margin-left: 60px;

    & p {
      color: #afb5be;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 10px;
    }
  }
}
</style>